<div class="row-fluid">
    <div class="span6">
    <div class="row-fluid">

      <div class="span4">
        <table class="table  table-no-align text-layout" style="height: 156px">
          <tr>
            <td colspan="4"><span class="label label-info">主机</span> <span class="label label-success">{{hosts.length}}</span></td>
          </tr>
          <tr>
            <td title="正常"><img src="/static/images/icon/server_ok.png" class="img-size"/> <br/>{{normal_hosts.length}}</td>
            <td title="维护"><img src="/static/images/icon/server_maintain.png" class="img-size"/> <br/>{{maitain_hosts.length}}</td>
            <td title="关机" ><img src="/static/images/icon/server_stop.png" class="img-size"/> <br/>{{shutdown_hosts.length}}</td>
            <td title="未激活" ><img src="/static/images/icon/server_unactive.png" class="img-size"/> <br/>{{exception_hosts.length}}</td>
          </tr>
        </table>
      </div>
      <div class="span4">
        <table class="table table-no-align text-layout" style="height: 156px">
          <tr>
            <td colspan="3"><span class="label label-info">虚拟机</span> <span class="label label-success">{{vms.length}}</span></td>
          </tr>
          <tr>
            <td title="运行"><img src="/static/images/icon/running.png" class="img-size"/> <br/>{{normal_vms.length}}</td>
            <td title="关闭" ><img src="/static/images/icon/shutdown.png" class="img-size"/> <br/>{{shutdown_vms.length}}</td>
            <td title="异常" ><img src="/static/images/icon/crashed.png" class="img-size"/> <br/>{{exception_vms.length}}</td>
          </tr>
        </table>
      </div>
      <div class="span4">
        <table class="table table-no-align text-layout" style="height: 156px">
          <tr>
            <td colspan="2"><span class="label label-info">存储</span> <span class="label label-success">{{storages.length}}</span></td>
          </tr>
          <tr>
            <td title="正常"><img src="/static/images/icon/storage_ok.png" class="img-size"/> <br/>{{storageok.length}}</td>
            <td title="异常" ><img src="/static/images/icon/storage_error.png" class="img-size"/> <br/>{{storageerror.length}}</td>
          </tr>
        </table>
      </div>
    </div>
    </div>
    <div class="span6">
        <div class="row-fluid">
            <div class="span6">
                <piechart width="200" height="200" initial="cluster.os_info" title="虚拟机操作系统"/>
            </div>
            <div class="span6">
                <piechart width="200" height="200" initial="cluster.storage_info" title="存储使用(GB)"/>
            </div>
        </div>
    </div>
</div>
<div class="row-fluid">
    <div class="span6">
        <div class="hot-title"><b>主机负荷TOP{{ top_count }}</b></div>
        <hosttoplist url="/api/cluster/{{ cluster.id }}/top_hosts" name='hosts'></hosttoplist>
    </div>
    <div class="span6">
        <div class="hot-title"><b>虚拟机负荷TOP{{ top_count }}</b></div>
        <vmtoplist url="/api/cluster/{{ cluster.id }}/top_vms" name="vms"></vmtoplist>
    </div>
</div>